@import "style.less";

//============================= Event Page style ===================================

  //-------------------------- Body Section -------------------------------------------
  
  #content-wrapper.page {
    padding-left: 0; 
    padding-right: 0; 
    background-color: white; 
    .box-shadow(0 0 4px #222);
    
    #event-footer {.padded-span(); z-index: 500;}  
    
    
    //-----Event page Header-----
    #event-header {
      //border-bottom: 1px solid #555; #gradient > .vertical(@colorGrey, darken(@colorGrey,15%)); .box-shadow(0 1px 3px #888);  
      
      // For event organizer thumb
      #organizer-thumb {
        width: 80px; 
        height: 80px; 
        border: 1px solid #555; 
        background-color: white; 
        overflow: hidden; 
        .border-radius(5px);}
      
      // For button/social stuffs on the right 
      #right-social {.pull-right();.padded-horizon(); text-align:right;}
      
      // For counter of participants 
      #counter {
        color: @colorCyan; 
        width: 100%; text-align: right; 
        .padded-vertical(@paddingSmall); 
        .pull-right();
        
        >h3, >div, >span {display: inline-block;}
        
        // For the inner of the counter
        #count-inner {
          display: inline-block; 
          background: url("../img/bg-clock.png") 0 0 repeat-x;
          
          >h3 {
            margin-left: 2px; 
            margin-right: -2px; 
            letter-spacing: 5px; 
            line-height: 23px; 
            font-size: 20px;
          }
       
        }
      } 
        
    }
    
    //-----Event page Main-----
    #event-main {
      position:relative; 
      display:block; 
      min-height: 700px; 
      background: url(/assets/img/square-tt.png) repeat #666159;

      
      .flexslider {margin-bottom: 30px; .box-shadow(0 0 4px #888); margin-top: 10px;
        .slides img {width: 100%;}
      } 
      
      .flex-caption {width:100%;}
    
      // For two columns
      #rightbar {
        height:100%; 
        float: left; 
        .padded-span();
        
        // Any div in #left,#right
        >div.row-fluid {margin-top: @paddingMedium;}
        .box {
          background: #f3f3f3; 
          margin: 10px auto; 
          min-height: 150px; 
          border: 4px solid white; 
          padding-right: @paddingLarge; 
          .padded-span(); 
          .box-shadow(0 0 3px #888); overflow: auto;
        }
      }
      
      #centerbar {
        box-shadow: 2px 0 4px #333, -2px 0 4px #333;
        background-color: white;
        min-height: 700px;
        height: 100%;
        float: left;
        >div.row-fluid {margin-top: @paddingMedium; .padded-horizon();}
      }
      // For right column
      //#rightbar {float:right; background-color: #fafafa; .box-shadow(1px 0 3px #888 inset); position:absolute; top: 0; bottom: 0; right: 0; z-index: 1;
        
      //}
      
      // Float around boxes
      #map-canvas {
        margin-top:10px; 
        margin-bottom:10px; 
        height: 230px; border: 4px solid white; 
        .box-shadow(0 0 5px #888); .border-radius(5px);
      }
      
      //#location-btns {display:none;}
      #location-add-btn{
        background: url("../img/btn-add.png") no-repeat 0 4px; 
        width:20px; height:20px;
      } 
      
      // Slider settings
      #upload-slider-view {
        background: #eee; 
        margin-bottom: 30px;   
        .border-radius(5px); 
        border: 1px solid #aaa;
        
        // Drop-area for slider
        #drop-area-slider {
          height: 300px; 
          margin:0;  
          background-image: url("../img/light-wool-tt.png");
          .inset();
          
          >div {margin:0;} 
          
          // Dropbox and buttons
          .dropbox {text-align: center;}
         
          // Flexslider style
          #flexSlider {height:100%;
          
            .slides li>img {max-height: 100%; max-width: 100%;}
          }
        }  
       // Buttons inside slider
       .buttons {
         text-align: left; 
         float: right;
         
          >* {
            margin-bottom: 10px; 
            width: 100px; 
            height: 30px; 
            font-size: 18px; 
            display: block;
          }
          // browse button
          #browse {margin-top: 150px;}
        }
        
        // Thumbnails 
        #thumbnails { 
          padding-bottom: @paddingMedium; 
          height:140px; 
          display:none; 
          #gradient > .vertical(@colorGrey,darken(@colorGrey,15%));
          
          // Style for each thumbnail
          .thumbnail { 
            height: 70px; 
            width: 80px;
            background: white;
            position: relative; 
            .box-shadow(0 0 2px #999); 
            
            // Remove button
            .remove-btn{ 
              background: url("../img/btn-close.png") 
              transparent; 
              height:20px; 
              width:20px; 
              position:absolute; 
              top: -10px; 
              right: -10px;
            }
            
            // For each image
            >img {height: 50px; width: 100%; margin: 0; }
            
            // Progress bar
            >.progress {
              height: 4px; 
              margin:5px 0; 
              #gradient > .vertical(darken(@colorGreyD,15%),@colorGreyD);
          
              >.bar {#gradient > .horizontal(@colorGreenSteel,lighten(@colorGreenSteel,15%));}
            }
          }
        } 
      }
    
      // Event's Posts
    #post-input{margin: 10px  0; width: 99%;}
    .comments-wrapper {padding: 10px; background-color: #eee;}
    }
 
  }
  
  
  // Album style
    #upload-album-view {margin:0; 
      
      #upload-album-header {
        padding: 10px; 
        width: 100%; 
        border-bottom: 1px solid #aaa; 
        background-color: white;
      }
      
      #drop-menu-right {float: right; text-align: right; }
      
      #upload-album-main #drop-area { 
        height: 420px; 
        padding: 10px; 
        background: url("../img/DropBox.png") no-repeat center;
      
        h3 { padding: 2px 4px; color:@colorNavBarTop; }
        
        .thumbnail { 
          height: 195px; 
          width: 230px; 
          background: white; 
          position: relative; 
          display: inline-block; 
          float: left; 
          margin-bottom: 10px; 
          margin-left: 15px; 
          text-align: center;
          .box-shadow(0 0 2px #999); 
                     
            .photo-caption{ height: 45px; font-size: 11px;}
            
            >img {max-height: 125px; max-width: 100%; }
            
            >.progress {height: 4px; margin:5px 0; #gradient > .vertical(darken(@colorGreyD,15%),@colorGreyD);
          
              >.bar { #gradient > .horizontal(@colorGreenSteel,lighten(@colorGreenSteel,15%));}
          
            }
                       
            .remove-btn{ 
              background: url("../img/btn-close.png") transparent; 
              height:20px; 
              width:20px; 
              position:absolute; 
              top: -10px; 
              right: -10px;
            }
        }
      }
      #upload-album-footer {padding: 10px; border-top: 1px solid #aaa; background-color: white;}
    }
    
  //-------------------------- Friend box Section -------------------------------------------
  .friend-section {margin-left: @paddingMedium;}
  .friend-thumb {padding: @paddingSmall; border-top: 1px solid #eee; border-bottom: 1px solid #ccc;  
    .pic {width: 28px; height: 28px;}
  }
  .event .thumbnail{padding: 0; border: 1px solid #bbb;}
